<template>
    <div class="edit-popup" style="width: 50vw">
        <popup
            ref="popupRef"
            title="流水明细"
            :async="true"
            width="50vw"
			:cancelButtonText="false"
			:confirmButtonText="false"
            @close="handleClose"
        >
            <div class="popup-div">
				<el-table size="large" style="max-height: 460px;overflow-y: auto;" v-loading="pager.loading" :data="pager.lists">
					<el-table-column label="操作金额" prop="name" min-width="120">
						<template #default="{ row }">
							{{ row.price }}
						</template>
					</el-table-column>
					<el-table-column label="操作前金额" prop="name" min-width="120">
						<template #default="{ row }">
							{{ row.before }}
						</template>
					</el-table-column>
					<el-table-column label="操作后金额" prop="name" min-width="120">
						<template #default="{ row }">
							{{ row.after }}
						</template>
					</el-table-column>
					<el-table-column label="创建时间" prop="name" min-width="180">
						<template #default="{ row }">
							{{ row.created_at }}
						</template>
					</el-table-column>
					<el-table-column label="备注" prop="name" min-width="180">
						<template #default="{ row }">
							{{ row.content }}
						</template>
					</el-table-column>
				</el-table>
				<div class="flex justify-end mt-4">
					<pagination v-model="pager" @change="getLists" />
				</div>
            </div>
        </popup>
    </div>
</template>
<script lang="ts" setup>
	import { getBalanceList, getRechargeType } from '@/api/finance'
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
	import feedback from '@/utils/feedback'
	import { roomMzGoodsList,roomMzGoodsChoice,roomMzGoodsNotChoice} from '@/api/live'
	import {useDictOptions} from "@/hooks/useDictOptions";
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const tableData = ref([]);

	const queryParams = reactive({
		uuid: '',
		type: '',
	});

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: getBalanceList,
		params: queryParams
	});

	getLists();
	console.log(pager)

    // 打开弹窗
    const open = () => {
        popupRef.value?.open();
    };


    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

    const setFormData = (id:any, title:any) => {
		getRechargeType().then(res => {
			let obj = res.list.find(res => res.name === title)
			queryParams.uuid = id;
			queryParams.type = obj.type;
			getLists().then((res) => {
			    tableData.value = res.list
			});
		})

    };

    defineExpose({
        open,
        setFormData
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
		overflow-x: auto;
		/*border: 1px red solid;*/
    }
</style>
